<template>
	<view>
		<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="task_row border-bottom flexRow title_color">
				<view class="row_24 text-ellipsis">
					任务ID
				</view>
				<view class="row_18 text-ellipsis">
					审核状态
				</view>
				<view class="row_18 text-ellipsis">
					任务日期
				</view>
				<view class="row_18 text-ellipsis">
					任务积分
				</view>
				<view class="row_24 text-ellipsis">
					任务类型
				</view>
			</view>
			<task-record-item v-for="(item,key) in taskList" :key="key" :data="item"></task-record-item>
			
		</mescroll-uni>
		
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import request from "../../apiRequest/request.js"
	import taskRecordItem from '@/components/taskRecordItem.vue'
	export default {
		mixins: [MescrollMixin],
		components: {taskRecordItem},
		data() {
			return {
				taskList: [],
				currentTask: {},
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				}
			}
		},
		onLoad() {
			this.currentTask = uni.getStorageSync("currentTask");
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				request.taskRecord(page.num,30,this.currentTask.id).then(res=>{
					if(page.num==1) this.taskList = [];
					this.taskList = this.taskList.concat(res.data.list)
					let hasNext =  res.data.list.length < 30? false:true;
					this.mescroll.endSuccess(this.taskList.length,hasNext)
				}).catch(err=>{
					this.$unexpected(err)
				})
			}
		}
	}
</script>

<style>
.task_row{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	font-size:28rpx;
	line-height: 28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	flex-wrap: nowrap;
	text-align: center;
	padding: 30rpx 0;
}
.border-bottom{
	border-bottom: 1rpx solid rgba(238,238,238,1);
}
.row_24{
	width: 24%;
}
.row_18{
	width: 18%;
}
.title_color{
	color:rgba(51,51,51,1);
}
.item_color{
	color:rgba(172,172,172,1);
}
.audit_note{
	font-size: 30rpx;
	padding-left: 10rpx;
	padding-bottom: 10rpx;
}
</style>
